<template>
  <div class="login">
    <div style="height: 100%">
      <!-- <img class="bg" src="../../assets/img/login-bg.png"/>
      <img class="up" src="../../assets/img/login-bg-up.png"/> -->

      <div class="box">
        <h3>运营管理平台</h3>

        <div class="input">
          <div class="form">
            <el-form ref="moForm" :model="loginForm" :rules="rules">
              <el-form-item prop="username">
                <el-input
                  placeholder="手机号"
                  v-model="loginForm.username"
                ></el-input>
              </el-form-item>
              <el-form-item prop="passwd">
                <el-input
                  placeholder="密码"
                  type="password"
                  v-model="loginForm.passwd"
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 10px" prop="verifyCode">
                <el-col :span="12">
                  <el-input
                    placeholder="验证码"
                    v-model="loginForm.verifyCode"
                  ></el-input>
                </el-col>
                <el-col :span="8" style="padding: 0px 0 4px 10px">
                  <div class="code">
                    <span>{{ code }}</span>
                  </div>
                </el-col>
                <el-col :span="4" style="padding-left: 10px">
                  <div @click="refresh" class="fresh">刷新</div>
                </el-col>
              </el-form-item>
              <!--<br>-->
              <!--<el-form-item class="remember">-->
              <!--<el-checkbox v-model="checked" label="记住用户名"-->
              <!--@keyup.enter.native="login('form')"></el-checkbox>-->
              <!--</el-form-item>-->
              <el-button
                style="width: 100%; margin-top: 30px"
                type="primary"
                :loading="loading"
                @click="login"
                >登录
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import LoginService from './service'
import { mapActions,mapState } from "vuex";
export default {
  name: "Login",
  computed:{
    ...mapState(['userInfo']),
  },
  data() {
    var checkName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    var checkCode = (rule, value, callback) => {
      if (value === "" || value.toLowerCase() !== this.code.toLowerCase()) {
        callback(new Error("验证码错误"));
      }
      callback();
    };
    return {
      loginForm: {
        username: "",
        verifyCode: "",
        passwd: "",
      },
      code: "",
      captcha_img: "",
      loading: false,
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        passwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        verifyCode: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
          { validator: checkCode, trigger: "blur" },
        ],
        check: [{ validator: checkName, trigger: "blur" }],
      },
      checked: false,
    };
  },
  created() {
    if(this.userInfo) this.$router.push("/");
    this.refresh();
  },
  methods: {
    ...mapActions(["setRouter"]),
    async login() {
      this.$refs.moForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          console.log(this.loginForm.passwd, "000");
          const user = await this.setRouter({
            account: this.loginForm.username,
            password: this.loginForm.passwd,
          });
          if(user.code==1){

            this.$router.push("/");
          }else this.$message.error(user.msg);
       
          this.loading = false;
        } else {
          console.log("error submit");
          return false;
        }
      });
    },
    createCode: function () {
      var code = "";
      var codeLength = 4;
      var codeArray = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ];
      for (var i = 0; i < codeLength; i++) {
        var codeIndex = Math.floor(Math.random() * 36);
        code += codeArray[codeIndex];
      }
      this.code = code;
    },
    refresh: function () {
      this.createCode();
      // this.captcha_img = random_captcha()
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
}

.bg {
  height: 100%;
  width: 100%;
}

.up {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  left: 0px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 325px;
  margin-left: -175px;
  margin-top: -300px;
}

.input {
  background-color: white;
  height: 100%;
  width: 100%;
  margin-top: 25px;
}

.form {
  padding: 40px 30px;
}

.code {
  width: 84px;
  height: 35px;
  line-height: 28px;
  font-size: 20px;
}

.captcha {
  margin-bottom: -50px;
}

.captcha img {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 36px;
}

.fresh {
  text-align: right;
  color: #0085d0;
  font-size: 12px;
  cursor: pointer;
}

.remember {
  float: right;
  margin-bottom: 10px;
  font-size: 12px;
}

.el-checkbox__label {
  font-size: 12px !important;
}

.el-form-item__error {
  color: #ff4949 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  padding-top: 4px !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
}
</style>
